require('../../assets/js/common.js')
require('./sportsdata.less')
require('../../assets/fonts/iconfont.css')

/* 引入axios */
let axios = require('../../utils/axios')

/* 引入dom元素获取 */
const { $, $$, $$$ } = require('../../utils/dom')

//引入weui
require('weui')  //样式库
const weui = require('weui.js') //weui.js

//引入echarts
//引入echarts
const echarts = require('echarts')
const { render } = require('less')

/* 文档加载 */
$(function () {
    /* 点击箭头返回上一级 */
    $$('#headimg').addEventListener('click', function () {
        // console.log(1);
        history.back()
    })
    /* 获取头像 */
    axios.get('/api/user/info').then(function (res) {
        // console.log(res.data);
        if (res.data.errno == 0) {
            let data = res.data.data;
            $$('#portrait').src = data.imgUrl;
        }
    })
    /* 获取运动数据 */
    axios.get('/api/exercise').then(function (res) {
        console.log(res.data.data);
        let data = res.data.data;
        $$('#sum7Calorie').textContent = data.sum7Calorie;
        $$("#sum7Duration").textContent = data.sum7Duration

        let dataday = data.days;
        let xdata = dataday.map(function (v) {
            return v.date.substr(5)
        })
        let ydata = dataday.map(function (v) {
            return v.sumDuration
        })

        let obj = {
            '跑步': 0,
            '骑行': 0,
            '训练': 0
        }
        data.days.forEach(function (v) {
            v.exerciseData.forEach(function (v2) {
                if (v2.type === 0) {
                    obj['跑步'] += v2.duration
                } else if (v2.type === 1) {
                    obj['骑行'] += v2.duration
                } else {
                    obj['训练'] += v2.duration
                };
            });
        })

        let arrdata = []
        for (const key in obj) {
            arrdata.push({
                value: obj[key],
                name: key
            })
        }
        secnd(arrdata)
        first(xdata, ydata)
        three(xdata)
    })

    /* 柱状图 */
    function first(xdata, ydata) {
        let myChart = echarts.init($$("#main01"));
        let option;

        option = {
            //标题
            title: {
                text: '近7天运动时长',
                left: 10,
                top: 10
            },
            grid: {
                show: true,
                top: '20%',
                right: '5%',
                bottom: '10%',
                left: '13%'
            },
            //X轴显示的数据
            xAxis: {
                type: 'category',
                data: xdata
            },
            //Y轴显示的数据
            yAxis: {
                type: 'value'
            },
            //数据集群/数据系列
            series: [
                {
                    data: ydata,
                    type: 'bar'
                }
            ]
        };

        option && myChart.setOption(option);

    }

    /* 饼图 */
    function secnd(arrdata) {
        let myChart = echarts.init($$("#main02"));
        let option;

        option = {
            //标题
            title: {
              text: '运动分类',
              left: 10,
              top: 10
            },
            //图例组件
            legend: {
              orient: 'vertical',
              left: 'left',
              top:'middle'
            },
            //数据集群
            series: [
              {
                name: '运动分类',
                type: 'pie',
                radius: '50%',
                data:arrdata,
                //  [
                //   { value: 1048, name: '1' },
                //   { value: 735, name: '2' },
                //   { value: 580, name: '3' },
                //   { value: 484, name: '4' },
                //   { value: 300, name: '5' }
                // ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          };

        option && myChart.setOption(option);

    }
    /* 横柱图 */
    function three(xdata){
        let myChart = echarts.init($$("#main03"));
        let option;

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: xdata
  },
  series: [
    {
      name: '跑步',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [320, 302, 301, 334, 390, 330, 320]
    },
    {
      name: '骑行',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '训练',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    }
  ]
};

option && myChart.setOption(option);
    }
    
})